<template>
  <el-container class="main-container">
    <!--头部-->
    <el-header height="45px">
      <span class="header-item">经费管理系统</span>

      <el-link class="list-top-item4" style="color: white" :underline="false" @click="toMainList">收支情况</el-link>

      <el-link class="list-top-item4" style="color: white" :underline="false" @click="toHistoryList">收支历史</el-link>

      <el-link class="list-top-item4" style="color: white" :underline="false" @click="toComparedList">收支对比</el-link>

      <div class="right-top">
        <el-link class="list-top-item3" :underline="false" style="color: red"  @click="toUserList">用户管理</el-link>

        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-user-solid"></i><span class="el-dropdown-link2">{{ this.$store.state.user.loginName }} </span></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出/注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <el-container>
      <el-aside style="width: 15%" class="left-group"></el-aside>

      <!--主要内容-->
      <el-main>
        <div>
          <!--面包屑-->
          <el-breadcrumb separator="/" class="users-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>

          <!--主体表单卡片-->
          <el-card class="user-card">
            <!--上部分表单-->
            <el-form :inline="true" :model="UserForm" class="demo-form-inline">
              <!--        <el-form-item class="user-form-top" label-width="70px">
                        <el-select clearable v-model="formInline.userName" placeholder="用户名" >
                          <el-option
                              v-for="item in userNames"
                              :key="item.id"
                              :value="item.userName">
                            <span style="float: left">{{ item.userName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>-->

              <!--        <el-form-item>
                        <el-input v-model="formInline.userName" placeholder="用户名"></el-input>
                      </el-form-item>

                      <el-form-item>
                        <el-input v-model="formInline.phoneNo" placeholder="手机号"></el-input>
                      </el-form-item>-->

              <el-form-item class="user-buttons">
                <!--          <el-button @click="" type="re" icon="el-icon-refresh">重置</el-button>
                          <el-button @click="" type="primary"  icon="el-icon-search">查询</el-button>-->
                <el-button @click="openAdd" type="success" icon="el-icon-plus">新增用户</el-button>
                <el-button @click="exportExcel" type="down" icon="el-icon-download">导出Excel</el-button>
              </el-form-item>
            </el-form>


            <!--表格-->
            <el-table :data="userList" borde class="user-table">
              <el-table-column
                  prop="userName" label="姓名"  sortable>
              </el-table-column>

              <el-table-column
                  prop="loginName" label="用户名" sortable>
              </el-table-column>

              <el-table-column
                  prop="idNo" label="身份证"  sortable>
              </el-table-column>

              <!--        <el-table-column
                          prop="status"
                          label="是否禁用"
                          width="100">
                        <template slot-scope="scope">
                          <el-switch
                              v-model="scope.row.status===1"
                              active-color="#13ce66"
                              inactive-color="#ff4949">
                          </el-switch>
                        </template>
                      </el-table-column>-->

              <el-table-column
                  prop="phoneNo" label="手机号"  sortable>
              </el-table-column>

              <el-table-column label="操作" width="130">
                <template #default="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="openUpdate(scope.row)"></el-button>
                  <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                </template>
              </el-table-column>

            </el-table>

            <!--分页-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 8, 10]"
                :page-size="pageSize"
                background
                align="center"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total-1">
            </el-pagination>

            <!--      引入用户注册增加-->
            <UserAdd :addVisible="addVisible"
                     @changeShow="showAdd"
                     @reFresh="reFresh"></UserAdd>

            <!--      引入用户新增-->
            <UserUpdate :updateUser="this.updateUser"
                        :updateVisible="updateVisible"
                        @changeShow="showUpdate"
                        @reFresh="reFresh"></UserUpdate>
          </el-card>
        </div>
      </el-main>


      <el-aside style="width: 15%" class="right-group"></el-aside>
    </el-container>

  </el-container>

</template>

<script>
import {deleteUserById, exportUserInfo, findUserPage} from '@/api/users'
import UserAdd from "@/components/UserAdd";
import UserUpdate from "@/components/UserUpdate";
import {logout} from "@/api/login";

export default {
  name: "UserList",



  data () {
    return {
      radio:'1',
      // 控制新增编辑弹窗的显示与隐藏
      updateVisible: false,
      addVisible: false,

      UserForm:{
        userName:'',
        loginName:'',
        idNo:'',
        phoneNo:''
      },

      //用户名集合
      userNames: [],
      //用户集合
      userList: [],

      updateUser: '',

      //每页显示的条数
      pageSize: 8,
      //总条数
      total: 50,
      //当前页码
      current: 1
    }
  },

  //组件引用
  components: {
    UserAdd,
    UserUpdate
  },

  //调用钩子函数
  created() {
    //创建组件的时候调用所有用户的方法
    this.getUserPage()
  },

  methods: {
    toUserList () {
      this.$router.push({ path: '/user' })
    },

    toMainList () {
      this.$router.push({ path: '/main' })
    },

    toHistoryList () {
      this.$router.push({ path: '/history' })
    },

    toComparedList () {
      this.$router.push({ path: '/compared' })
    },

    //当每页条数改变的时候
    handleSizeChange(val) {
      //将val赋值给size
      this.size = val
      //重新查询数据
      this.getUserPage()
    },
    //当页码改变的时候
    handleCurrentChange(val) {
      this.current = val
      this.getUserPage()
    },

    //刷新页面
    reFresh () {
      this.getUserPage()
    },

    // 按钮点击事件 显示新增弹窗组件
    openAdd () {
      this.addVisible = true
    },

    // 按钮点击事件 显示编辑弹窗组件
    openUpdate: function (row) {
      //对象深克隆
      row = JSON.parse(JSON.stringify(row))
      this.updateUser = row   //row当前行数据，把当前行的数据赋值给 表单
      this.updateVisible = true
    },


    // 监听子组件弹窗关闭后触发，有子组件调用
    showAdd(data){
      this.addVisible = data !== 'false';
    },

    showUpdate (data) {
      this.updateVisible = data !== 'false'
    },

    /**
     * 加载用户列表
     */
    async getUserPage(){
      const {data} = await findUserPage(this.current,this.size)
      console.log(data)
      this.userList = data.data.records
      this.total = data.data.total
    },

    //删除操作按钮
    handleDelete: function (row) {
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUser(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 删除用户
     */
    async deleteUser (id) {
      await deleteUserById(id).then(res => {
        if (res) {
          this.$notify.success({
            title: '操作成功',
            message: '用户删除',
          })
          //刷新数据
          this.reFresh()
        }
      })
    },

    //退出登陆
    async logout () {
      const res = await this.$confirm('此操作将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登入'
        })
      })
      if (res === 'confirm') {
        this.$store.commit('REMOVE_INFO')
        logout().then(resp => {
          if (resp) {
            // window.sessionStorage.clear()
            this.$router.push('/login')
          }
        })
      }
    },

    /**
     * 导出Excel文件
     */
    async exportExcel(){
      exportUserInfo(this.user).then(res => {
        //这里没有返回数据,但是要在响应头中进行下载操作
        // 将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res.data]));
        //创建了一个a标签的超链接
        const a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls";
        a.click();
        window.URL.revokeObjectURL(url);
        this.open2()
      }).catch(() => {
        this.openTip()
      })
    },

    open1(){
      this.$notify({
        title: '提示',
        message: '删除成功！'
      });
    },
    open2(){
      this.$notify({
        title: '提示',
        message: '导出用户列表成功！'
      });
    },
    openTip() {
      this.$notify({
        title: '提示',
        message: '导出用户列表失败！'
      });
    },
  }
}
</script>

<style>
.el-header {
  background-color: #252047;
  color: #333;
  width: 100%;
}
.users-breadcrumb{
  padding-left:20px;padding-bottom:10px;
  font-size:13px;
}


.user-card{
  width: 88%;
  margin-left: 6%;
}


.user-buttons{
  margin-left: 50px;
}



.demo-form-inline{
  text-align: right;
}

.user-table{
  width: 94%;
  margin-left: 3%;
  margin-top: 30px;
  margin-bottom: 50px;
}



.main-container{
  height: 100%;
}


.right-top{
  height: 42px;
  background-color: #252047;
  float: right;
  margin-right: 10%;
}

.header-item{
  float: left;
  line-height: 45px;
  font-size: 22px;
  color: white;
  width: 14%;
  text-align: center;
}

.list-top-item3{
  font-size: 15px;
  width: 80px;
  text-align: center;
  line-height:45px;
}

.list-top-item4{
  font-size: 15px;
  color: white;
  width: 8%;
  text-align: center;
  line-height:45px;
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height:45px;
}

.el-dropdown-link2 {
  cursor: pointer;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height:45px;
  margin-left: 2px;
}

.left-group, .right-group{
  background-color: #c9d3e7;
}


</style>